<template>
	<view class="box">
		<view class="img">
			<image :src="list.image" mode=""></image>
		</view>
		<!-- 内容 -->
		<view class="content">
			
			<!-- 上部分 -->
			<view class="title">{{list.title}}<text class="titleMSg">{{list.titleMsg}}</text></view>
			<!-- 下部分 -->
			<view class="foot">
				<view class="left">
					<view>结算周期:{{list.settlement_cycle}}</view>
					<view>管理费:{{list.goods_price}}%</view>
				</view>
				<view class="right">
					<view>合约周期:{{list.contract_cycle}}天</view>
					<view>预计年化率:{{list.estimated_annualized_rate}}%</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['list'],
		data() {
			return {
				
			};
		}
	}
</script>

<style>
.box{
	width: 86%;
	height: 220rpx;
	margin:40rpx auto;
	background-color: #FFFFFF;
	box-shadow: 0 0 6rpx 10rpx rgba(0,0,0,.06);
	position: relative;
}
.img{
	position: absolute;
	top: 40rpx;
	left: 20rpx;
	border-radius: 32rpx;
}
image{
	width: 220rpx;
	height: 140rpx;
}
.title{
	position: absolute;
	left: 260rpx;
	top: 30rpx;
	font-size: 1em;
	font-weight: bold;
	color: #005FDB;
}
.titleMSg{
	padding-left: 10rpx;
	font-size: 1em;
}
.left{
	width: 200rpx;
	display: flex;
	flex-wrap: wrap;
	position: absolute;
	left: 260rpx;
	top: 80rpx;
	font-size: .7em;
	color: #959595;
}
.left>view{
	margin: 10rpx 0;
}
.right{
	width: 200rpx;
	display: flex;
	flex-wrap: wrap;
	position: absolute;
	left: 440rpx;
	top: 80rpx;
	font-size: .7em;
	color: #959595;
}
.right>view{
	margin: 10rpx 0;
}
</style>
